<div v-cloak id="app" class="main-content">
    <one-table
        :option="option"
        :data="data"
        :loading="loading"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
    >
        <template slot="menuRight">
            <div class="form-box" flex="main:left">
                <el-input
                    type="text"
                    v-model="search.keyword"
                    placeholder="用户ID"
                    style="width: 240px; margin-right: 5px"
                ></el-input>
                <el-button type="primary" @click="getData">筛选</el-button>
            </div>
        </template>
        <template slot="is_read" slot-scope="scope">
            <el-tag v-if="scope.row.is_read == 1">是</el-tag>
            <el-tag type="danger" v-else>否</el-tag>
        </template>
        <template slot="imgs" slot-scope="scope">
            <div flex="main:center">
                <el-image
                    v-for="(item,key) in scope.row.imgs"
                    :key="key"
                    style="width: 70px; height: 70px"
                    :src="item"
                    fit="fit"
                    @click="proviewImg(item)"
                ></el-image>
            </div>
        </template>

        <!-- 自定义操作列 -->
        <template slot="operates" slot-scope="scope">
            <el-button
                size="mini"
                :disabled="scope.row.system"
                class="_tool"
                @click="handleReplay(scope.row, scope.index)"
            >
                <i class="el-icon-chat-dot-round"></i>
            </el-button>

            <el-popconfirm
                confirm-button-text="好的"
                cancel-button-text="不用了"
                icon="el-icon-info"
                icon-color="red"
                title="删除不能恢复,确定删除吗？"
                @confirm="handleDel(scope.row, scope.index)"
            >
                <el-button
                    :disabled="scope.row.system"
                    slot="reference"
                    size="mini"
                    class="_tool"
                    type="danger"
                >
                    <i class="el-icon-delete"></i>
                </el-button>
            </el-popconfirm>
        </template>
    </one-table>
</div>
{include file='common@components/one-table'}
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                loading: false,
                data: [],
                option: {
                    index: false,
                    header: true,
                    selection: false,
                    operates: { width: 100 },
                    page: {},
                    size: "mini",
                    column: [
                        {
                            label: "类型",
                            prop: "type",
                        },
                        {
                            label: "内容",
                            prop: "content",
                        },
                        {
                            label: "回复内容",
                            prop: "replay",
                        },
                        {
                            label: "用户ID|联系方式",
                            prop: "contact",
                        },
                        {
                            label: "已读",
                            prop: "is_read",
                            slot: true
                        },
                        {
                            label: "图片",
                            prop: "imgs",
                            slot: true,
                        },
                        {
                            label: "时间",
                            prop: "update_time",
                            width: 160,
                        },
                    ],
                },
                search: {
                    keyword: "",
                },
            }
        },
        created() {
            this.getData()
        },
        methods: {
            // 获取数据
            getData() {
                let _this = this
                _this.loading = true
                let postData = cloneDeep(_this.search)
                request({
                    params: {
                        s: "user/feedback/index",
                        page: _this.option.page.currentPage,
                        limit: _this.option.page.pageSize,
                    },
                    data: postData,
                    method: "post",
                }).then((e) => {
                    _this.loading = false
                    _this.data = e.data.data.list
                    _this.option.page.total = e.data.data.count
                })
            },
            //分页
            handleCurrentChange(currentPage) {
                let _this = this
                _this.option.page.currentPage = currentPage
                _this.getData()
            },
            //每页显示数
            handleSizeChange(val) {
                let _this = this
                _this.option.page.pageSize = val
                _this.getData()
            },
            //改变状态
            changeSwitch(row) {
                let _this = this
                _this.loading = true
                request({
                    params: {
                        s: "user/feedback/status/",
                        id: row.id,
                        val: row.status,
                    },
                    method: "post",
                }).then((e) => {
                    _this.loading = false
                })
            },
            //删除行
            handleDel(row, index) {
                let _this = this
                _this.loading = true
                request({
                    params: {
                        s: "user/feedback/del/",
                        id: row.id,
                    },
                    method: "post",
                }).then((e) => {
                    _this.data.splice(index, 1)
                    _this.loading = false
                })
            },
            //添加
            handleAdd() {
                let _this = this
                navigateTo({
                    s: "user/feedback/edit",
                })
            },
            //编辑
            handleEdit(row, index) {
                let _this = this
                navigateTo({
                    s: "user/feedback/edit",
                    id: row.id,
                })
            },
            handleReplay(row, index) {
                let _this = this
                _this
                    .$prompt("请填写回复内容", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        inputValue: row.replay,
                        inputPlaceholder: '请输入回复内容'
                    })
                    .then(({ value }) => {
                        request({
                            params: {
                                s: "user/feedback/replay/",
                                id: row.id,
                                val: value,
                            },
                            method: "post",
                        }).then((e) => {
                            _this.$message({
                                message: "回复成功",
                                type: "success",
                            })
                        })
                    })
            },
            proviewImg(img){
                window.open(img);
            }
        },
    })
</script>
